<template>
  <div class="smart-way">
    <div class="smart-way-title">
      <span>快捷入口</span>
    </div>
    <div class="smart-way-main">
      <div class="smart-way-main-item" v-for="item in items" :key="item.name">
        <router-link :to="'/main/' + item.path">
          <div
            class="smart-way-main-item-img"
            :style="'background-color:' + item.color"
          >
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="item.icon" />
            </svg>
          </div>
          <div class="smart-way-main-item-name">{{ item.name }}</div>
        </router-link>
      </div>

      <div class="smart-way-main-item">
        <router-link to="?">
          <div class="smart-way-main-item-img" style="background-color: grey">
            <i class="el-icon-plus"></i>
          </div>
          <div class="smart-way-main-item-name">编辑入口</div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          icon: "#iconhuihua",
          name: "当前会话",
          path: "huihua",
          color: "blue",
        },
        {
          icon: "#iconfangke",
          name: "访客管理",
          path: "fangke",
          color: "red",
        },
        {
          icon: "#iconlishi",
          name: "会话记录",
          path: "lishi",
          color: "green",
        },
        {
          icon: "#iconkehu",
          name: "客户管理",
          path: "kehu",
          color: "orange",
        },
        {
          icon: "#icongongdan",
          name: "工单中心",
          path: "gongdan",
          color: "blue",
        },
        {
          icon: "#icontongji",
          name: "数据报表",
          path: "tongji",
          color: "red",
        },
      ],
    };
  },
};
</script>

<style>
.smart-way {
  width: 445px;
  height: 357px;
  background-color: #ffffff;
  border-radius: 4px;
}

.smart-way span {
  display: block;
  padding: 25px 20px 5px;
}

.smart-way-title {
  font-family: "PingFangHK-Regular", "PingFang HK", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
}

.smart-way-main {
  width: 445px;
  display: flex;
  flex-wrap: wrap;
}

.smart-way-main-item {
  margin: 25px;
}

.smart-way-main-item-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  text-align: center;
  line-height: 60px;
  color: #ffffff;
  font-size: 20px;
}

a:-webkit-any-link {
  color: black;
}

.smart-way-main-item-name {
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
}
</style>